<template>
    <view v-if="!$utils.isCheckEmpty(orderList)">
        <view class="vote">
            <view v-for="(item, index) in orderList" :key="index">
                <view class="vote-lis">
                    <view class="vote-left" @click="copyClick(item.ticketCode)">
                        取票码：{{ item.ticketCode }}
                        <image class="vote-imgs" src="/sub_pages/movie/static/image/icon/icon_29.png" mode="scaleToFill" />
                    </view>
                    <view>
                        <u-button text="取票码" @click="qrcodeClick(item.ticketCode)" shape="circle" size="mini"></u-button>
                    </view>
                </view>
                <view class="vote-lis" v-if="item.verifyCode">
                    <view class="vote-left" @click="copyClick(item.verifyCode)">
                        验证码：{{ item.verifyCode }}
                        <image class="vote-imgs" src="/sub_pages/movie/static/image/icon/icon_29.png" mode="scaleToFill" />
                    </view>
                    <view></view>
                </view>
            </view>
        </view>
        <qrcode-components ref="qrcode"></qrcode-components>
    </view>
</template>

<script>
import service from './service.js';
import qrcodeComponents from './qrcode.vue';
export default {
    components: {
        qrcodeComponents,
    },
    props: {
        orderModel: {
            type: Object,
            default: () => {},
        },
    },
    computed: {
        orderList() {
            let list = [];
            if (this.orderModel.order && this.orderModel.order.codes) {
                list = service.getInitCodes(this.orderModel.order.codes.split(',') || []);
            }
            return list;
        },
    },
    methods: {
        copyClick(e) {
            this.$emit('copy', e);
        },
        qrcodeClick(e) {
            this.$refs.qrcode.open(e);
        },
    },
};
</script>

<style lang="scss" scoped>
.vote {
    background-color: #ffffff;
    padding: 15rpx 30rpx;
    &-lis {
        padding: 15rpx 0;
        @include flexCenterBetween;
    }
    &-left {
        @include font(28rpx);
        @include flexCenter;
    }
    &-label {
        width: 160rpx;
    }
    &-imgs {
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
    }
}
</style>
